<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view @tap="xuanzefakahang" class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<text style="margin-left: 60rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">发卡行：</text>
				<text class="grace-ellipsis" style="position: relative; left: 100rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">{{ fakahangname != '' ? fakahangname:'请选择发卡行'}}</text>
				<image src="../../static/jiantou.png" style="position: absolute;left: 650rpx; width: 20rpx;height: 35rpx;"></image>
			</view>
			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">持卡人：</text>
					<view class="grace-columns" style="margin-left: -100rpx;">
						<input v-model="user_name" style="width:530rpx;text-align: center;" placeholder="请输入持卡人姓名" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>

			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">银行卡号：</text>
					<view class="grace-columns">
						<input v-model="card_id" style="width:530rpx;text-align: center;" placeholder="请输入银行卡号" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>

			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">预留手机：</text>
					<view class="grace-columns" style="margin-left: -60rpx;">
						<input v-model="card_mo" style="width:530rpx;text-align: center;" placeholder="请输入预留手机" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>
			<button @tap="submit" type="primary" :style="{background:button_color}" class="button_color">确认</button>
			<ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				id: '', // 银行卡id
				user_name: '', // 持卡人姓名
				card_id: '', // 银行卡号
				card_mo: '', // 预留手机号
				bc_bank_id: '', // 银行卡发卡行id
				fakahangname: '请选择发卡行',
				loadings: false
			}
		},
		onLoad: function(opt) {
			console.log(opt);
			this.id = opt.id;
			this.card_info()
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 发卡行页面跳转事件
			xuanzefakahang() {
				uni.$once('xuanzefakahang', this.querenfakahang);
				uni.navigateTo({
					url: '/pages/card/issuer_selection?banck=储蓄卡&types=1,2'
				})
			},
			// 获取发卡行id，名称
			querenfakahang(data) {
				console.log(data);
				this.bc_bank_id = data.id,
				this.fakahangname = data.name
			},
			// 获取银行卡详情
			card_info() {
				var vm = this
				vm.loadings = true
				vm.myPost(
					'api/cardapi/get_card_info', {
						id: vm.id
					},
					function(res) {
						setTimeout(function(){
							vm.loadings = false
						},500)
						if (res.code == 200) {
							vm.fakahangname = res.data.bankinfo.name
							vm.user_name = res.data.user_name
							vm.card_id = res.data.number
							vm.card_mo = res.data.phone
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},function(){
						setTimeout(function(){
							vm.loadings = false
						},500)
					}
				)
			},

			// 确认修改按钮事件
			submit() {
				var vm = this;
				var objs = {
					id: vm.id,
					bank_num: vm.card_id,
					bank_phone: vm.card_mo,
					bank_name: vm.fakahangname
				};
				vm.myPost(
					'api/cardapi/edit_savings_card',
					objs,
					function(res) {
						if(res.code == 200){
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 700)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
						
					})
			}
		},
		components: {
			gracePage
		}
	}
</script>

<style>
	.button_color{
		margin-top: 450rpx; width:500rpx;height:90rpx;background:#3187D5;border-radius:6rpx;
	}
</style>
